import { ColumnProps } from 'antd/lib/table';

import { Row, Spin, Table, Button, Switch, Tag } from 'antd';

import React from 'react';
import { Product } from '@/models/product';
import { ProductTableContext, ProductList } from '../index';
import ISwitch from '../../add/components/ISwitch';

const columns: ColumnProps<Product>[] = [
  {
    title: '编号',
    dataIndex: 'id',
    align: 'center',
  },
  {
    title: '商品图片',
    dataIndex: 'albumPics',
    align: 'center',
    render: text => (
      <img
        style={{ height: '80px' }}
        src={(text || '').split(',')[(text || '').split(',').length - 1]}
        alt=""
      />
    ),
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    width: '200px',
    align: 'center',
  },
  {
    title: '品牌',
    dataIndex: 'brandName',
    align: 'center',
  },
  {
    title: '价格',
    dataIndex: 'price',
    align: 'center',
    render: text => `￥${text}`,
  },
  {
    title: '状态',
    key: 'tags',
    align: 'center',
    render: (text, record) => (
      <ProductTableContext.Consumer>
        {table => (
          <div>
            <p>
              上架：
              <ISwitch
                value={record.publishStatus}
                onChange={value => {
                  table.onRowUpdate({
                    ...record,
                    publishStatus: value,
                  });
                }}
              />
            </p>
            {/* <p>
              新品：
              <ISwitch
                value={record.newStatus}
                onChange={value => {
                  table.onRowUpdate({
                    ...record,
                    newStatus: value,
                  });
                }}
              />
            </p> */}
            {/* <p>
              推荐：
              <ISwitch
                value={record.recommendStatus}
                onChange={value => {
                  table.onRowUpdate({
                    ...record,
                    recommendStatus: value,
                  });
                }}
              />
            </p> */}
          </div>
        )}
      </ProductTableContext.Consumer>
    ),
  },
  // {
  //   title: 'SKU库存',
  //   key: 'skuStock',
  //   align: 'center',
  //   render: () => <Button type="primary" shape="circle" size="large" icon="edit" />,
  // },
  {
    title: '销量',
    dataIndex: 'sale',
    align: 'center',
    render: text => text || 0,
  },
  // {
  //   title: '排序',
  //   dataIndex: 'sort',
  //   align: 'center',
  // },
  // {
  //   title: '审核状态',
  //   dataIndex: 'verifyStatus',
  //   align: 'center',
  //   render: value => {
  //     const color = value === 1 ? 'green' : 'red';
  //     const text = value === 1 ? '审核通过' : '未审核';
  //     return <Tag color={color}>{text}</Tag>;
  //   },
  // },
  {
    title: '操作',
    key: 'actions',
    width: '170px',
    align: 'center',
    render: (_text, record) => (
      <ProductTableContext.Consumer>
        {(table: ProductList) => (
          <div className="horizon-button-group">
            {/* <Button onClick={() => table.onRowEdit(record.id!)}>编辑</Button> */}
            <Button type="danger" onClick={() => table.onRowDelete(record.id!)}>
              删除
            </Button>
          </div>
        )}
      </ProductTableContext.Consumer>
    ),
  },
];

export interface ProductTableProps {
  products: Product[];
  loading?: boolean;
}

const ProductListTable: React.FC<ProductTableProps> = props => (
  <Row>
    <Spin spinning={props.loading}>
      <Table<Product> dataSource={props.products} columns={columns} rowKey="id" bordered />
    </Spin>
  </Row>
);

export default ProductListTable;
